<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
		<style type="text/css">
			.ball {
				width: 15px;
				background-color: hotpink;
				height: 15px;
				border-radius: 50%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="button" value="移动小球" @click="flag=!flag" />
			<!--调试很久出现问题的原因  @before-enter等事件  要写在transition上面      -->
			<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
				<div class="ball" v-show="flag"></div>
			</transition>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					flag: false,
				},
				methods: {
					beforeEnter(el) {
						el.style.transform = 'translate(0,0)'
					},
					enter(el, done) {
						el.offsetWidth
						el.style.transform = 'translate(150px,450px)'
						el.style.transition = 'all 0.8s ease'

						done()
					},
					afterEnter(el) {
						/* 关键代码 动画分为前半场动画 还有后半场动画 使用这个可以让他一直是前半场动画 */
						this.flag = !this.flag
						/* el.style.opacity=0.5 使用这个出现的问题 就是要点击两次才会出现一次小球动画 */
					}

				}

			})
		</script>
	</body>
</html>
